<template>
  <view>
     <view class="content">
        <view class="header">
           <view class="header_top">
              <view class="left">
                 <u-icon name="arrow-left" :size="20" @click="goBack()"></u-icon>
                 <text style="margin-left: 10px;">{{cur.day}}</text>
                 <image
                    src="/static/tab1/icon_arrow_solid.png"
                    mode="scaleToFill"
                 />
              </view>
              <view class="right">
                 <image @click="calendar = !calendar"
                    src="/static/tab1/icon_calendar.png"
                    mode="scaleToFill"
                 />
              </view>
           </view>
           <view class="header_body" :style="{'--day-width': `calc((100vw - 110px) / 7)`}">
              <view class="calendar" v-if="calendar">
                 <view class="weeks">
                    <view class="item" :style="{color: `${cur.day.indexOf(label) != -1 ? '#212126' : '#BEBEC4'}`}"
                    v-for="(label, index) in weekLabel" :key="index">
                       {{ label }}
                    </view>
                 </view>
                 <view class="calendar_month">
                    <view class="calendar_day" v-for="(day, index) in months" :key="index"
                    :class="{'current': day.curMonth, 'actived': day.date == cur.date}" @click="selectItem(day)">
                       {{ day.value }}
                    </view>
                 </view>
              </view>
              <view class="weeks" v-else>
                 <view class="week" v-for="(date, index) in week" :key="index" 
                 :class="{'curitem': cur.date == date.date}" @click="selectItem(date)">
                    <text>{{ date.label }}</text>
                    <text>{{ date.value }}</text>
                 </view>
              </view>
           </view>
        </view>
        <view class="body">
           <u-empty v-if="courseList.length == 0 && (cur.day.indexOf('日') != -1 || cur.day.indexOf('六') != -1)" 
           icon="/static/tab1/icon_ly.png" text="今天是假期，出去走走吧" marginTop="30px"></u-empty>
           <u-empty v-else-if="courseList.length == 0" marginTop="30px"
           icon="/static/tab1/icon_course_yd.png" text="今天没课，出去运动一下吧"></u-empty>
           <view class="panel_content" v-else>
              <view class="item" v-for="(item, i) in courseList" :key="i">
                 <view class="item_wrap">
                    <view class="item_index">
                       <view>{{ i + 1 }}</view>
                       <view>{{ item.timeLabel }}</view>
                    </view>
                    <view class="item_content">
                       <view class="item_content_title">
                          <text>{{ item.subject }}</text>
                       </view>
                       <view class="item_content_label">
                          <text style="padding-right: 10px;">{{ item.teacher }}</text>
                          <text>{{ item.position }}</text>
                       </view>
                       <!-- <view class="item_content_desc">
                          <text style="padding-right: 10px;">{{item.timeIndex}}</text>
                          <text>{{item.time}}</text>
                       </view> -->
                    </view>
                 </view>
              </view>
           </view>
        </view>
        <view class="footer" @click="show = true">
           <u-icon name="setting-fill" :size="20" style="margin-right: 5px;"></u-icon>
           设置第一周开始时间
        </view>
     </view>

     <u-datetime-picker :show="show" title="设置第一周开始时间" mode="date" v-model="date"
     @cancel="show = false" @confirm="getTime"></u-datetime-picker>
  </view>
</template>

<script>
import {
  week as tools
} from '@/utils/date'
import {
  calendar
} from '@/utils/calendar'
import {
  getCourseListByTeacher
} from '@/api/course'
import {
  courseTime
} from '@/utils/constants'
import moment from '@/common/moment.js'
export default {
  data() {
     return {
        cur: {
           date: '',
           day: '',
        },
        months: [],
        calendar: false,
        courses: [],
        courseList: [],
        width: '',
        show: false,
        date: new Date().getTime()
     }
  },
  computed: {
     week() {
        const arr = []
        const curdate = new Date(this.cur.date)
        for(let i = 7; i > 0; i--) {
           let days = curdate.getDay()
           if(curdate.getDay() == 0) {
              days = 7
           }
           const dd = new Date(curdate.getFullYear(), curdate.getMonth(), curdate.getDate() - (days - i))
           arr.push({
              value: moment(dd).format('DD'),
              label: tools(dd.getDay()).substring(1, 2),
              date: moment(dd).format('yyyy-MM-DD'),
              week: dd.getDay()
           })
        }
        return arr.sort((a, b) => {
           return a.value - b.value
        })
     },
     weekLabel() {
        const arr = []
        for(let i = 1; i < 7; i++) {
           arr.push(tools(i).substring(1, 2))
        }
        arr.push(tools(0).substring(1, 2))
        return arr
     }
  },
  created() {
     if(this.$store.getters.term) {
        this.date = this.$store.getters.term
        this.getCourseData()
     }else {
        this.show = !this.$store.getters.term
     }
     this.$set(this.cur, 'date', moment(new Date()).format('yyyy-MM-DD'))
     this.$set(this.cur, 'day', tools(new Date().getDay(), '0'))
     this.months = calendar()
  },
  methods: {
     goBack() {
        uni.navigateBack()
     },
     selectItem(date) {
        this.courseList = []
        this.$set(this.cur, 'date', date.date)
        this.$set(this.cur, 'day', tools(date.week, '0'))
        this.timer && clearTimeout(this.timer)
        this.timer = setTimeout(() => {
           this.calendar = false
           const courses = this.courses.filter(item => {
              return item.date == date.date
           }).sort((a, b) => {
              return a.time - b.time
           })
           courses.forEach(item => {
              item.timeLabel = courseTime[item.time]
              this.courseList.push(item)
           })
        }, 200)
     },
     getCourseData() {
        const params = {}
        params.id = this.$store.getters.id
        params.time = this.date
        getCourseListByTeacher(params).then(res => {
           this.show = false
           this.$store.getters.term || this.$store.dispatch('storeTerm', this.date)
           if(res.code === 200) {
              this.courses = res.data
              const date = {
                 value: moment(new Date()).format('DD'),
                 label: tools(new Date().getDay()).substring(1, 2),
                 date: moment(new Date()).format('yyyy-MM-DD'),
                 week: new Date().getDay()
              }
              this.selectItem(date)
           }
        })
     },
     getTime(val) {
        this.getCourseData()
     }
  }
}
</script>

<style lang="scss" scoped>
  .content {
     height: 100vh;
     padding-top: var(--status-bar-height);
     box-sizing: border-box;
  }
  
  .header {
     position: relative;
     width: 100%;
     height: 130px;
     margin-top: var(--status-bar-height);
     box-sizing: border-box;
     z-index: 999;

     &_top {
        display: flex;
        align-items: center;
        height: 44px;
        padding: 0 10px;
        box-sizing: border-box;
        background-color: #ffffff;
     }

     .left {
        display: flex;
        align-items: center;
        width: 100%;

        text {
           margin-right: 10px;
           font-size: 24px;
           font-weight: 500;
        }

        image {
           width: 24px;
           height: 24px;
           margin-right: 10px;
        }
     }

     .right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;

        image {
           width: 24px;
           height: 24px;
        }
     }

     &_body {
        position: absolute;
        top: 44px;
        width: 100%;
        padding: 10px;
        border-radius: 0 0 14px 14px;
        box-sizing: border-box;
        background-color: #ffffff;

        .weeks {
           display: flex;
           align-items: center;

           .week {
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 100%;
              border-radius: 8px;
              border: 1px solid transparent;
              padding: 5px 10px;
              margin: 5px;
              background-color: #F7F7FA;
              text-align: center;

              text:last-child {
                 font-size: 16px;
                 font-weight: 550;
              }
           }

           .curitem {
              background-color: #ffffff;
              border: 1px solid #212126;
           }
        }
     }

     .calendar {

        &_month {
           display: flex;
           width: 100%;
           flex-wrap: wrap;
        }

        &_day {
           display: flex;
           align-items: center;
           justify-content: center;
           width: var(--day-width);
           height: var(--day-width);
           padding: 5px;
           box-sizing: border-box;
           border-radius: 50%;
           margin: 10px 15px 5px 0;
           background-color: #F7F7FA;
           color: #BEBEC4;

           &:nth-child(7n) {
              margin-right: 0;
           }
        }

        .current {
           color: #212126;
        }

        .actived {
           background-color: #212126;
           color: #ffffff;
        }

        .item {
           width: var(--day-width);
           text-align: center;
           margin-right: 15px;

           &:nth-child(7n) {
              margin-right: 0;
           }
        }
     }
  }

  .panel_content {
     width: auto;
     margin: 10px;
  }

  .body {
     height: calc(100vh - var(--status-bar-height) - 130px - 60px);
     overflow-y: auto;

     .item {
        width: 100%;
        margin: 0 auto;
        border-radius: 8px;
        color: #333;
        z-index: 1;

        &_wrap {
           display: flex;
           align-items: center;
           width: auto;
           padding: 10px 0;
           margin: 0 10px;
        }

        &_index {
           position: relative;
           display: block;
           margin-right: 20px;
           border-radius: 8px;
           color: #333;
           font-size: 14px;
           text-align: center;
           z-index: 1;

           view:last-child {
              color: #999;
           }

           &::before {
              content: "";
              position: absolute;
              top: 0;
              left: 50%;
              height: 100%;
              transform: translate(-50%, -100%);
              border: 1px dashed #cccccc;
              z-index: 0;
           }

           &::after {
              content: "";
              position: absolute;
              top: 100%;
              left: 50%;
              transform: translateX(-50%);
              height: 100%;
              border: 1px dashed #cccccc;
              z-index: 0;
           }
        }

        &_content {
           width: 100%;
           padding: 20px;
           border-width: 2px;
           border-style: solid;
           border-radius: 14px;

           &_title {
              font-size: 18px;
              font-weight: bold;
              line-height: 28px;
           }

           &_label {
              line-height: 20px;
           }

           &_desc {
              line-height: 20px;
           }
        }

        &:nth-child(1) {

           .item_index::before {
              display: none;
           }
        
           .item_content {
              border-color: rgba($color: #F55142, $alpha: .3);
              background-color: #FCF0F2;
              color: #F55142;
           }
        }

        &:nth-child(2) {

           .item_content {
              border-color: rgba($color: #5499DE, $alpha: .3);
              background-color: #E6F3FC;
              color: #5499DE;
           }
        }

        &:nth-child(3) {

           .item_content {
              border-color: rgba($color: #59BA56, $alpha: .3);
              background-color: #E6FCE9;
              color: #59BA56;
           }
        }

        &:nth-child(4) {
           .item_content {
              border-color: rgba($color: #996BE8, $alpha: .3);
              background-color: #F1EDFC;
              color: #996BE8;
           }
        }

        // &:nth-child(5) {
           
        //    .item_content {
        //       border-color: rgba($color: #80D9D9, $alpha: .3);
        //       background-color: #D5F7F7;
        //       color: #80D9D9;
        //    }
        // }

        &:nth-child(5) {

           .item_content {
              border-color: rgba($color: #F0B52A, $alpha: .3);
              background-color: #fff5bd;
              color: #F0B52A;
           }
        }

        &:last-child {
           .item_index::after {
              display: none;
           }
        }
     }
  }

  .footer {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 60px;
     background-color: #ffffff;
     font-size: 16px;
     font-weight: 550;
  
     image {
        width: 24px;
        height: 24px;
     }
  }
</style>
